import React from 'react'
import styles from '../Ordercss分支/Succ.module.css'
import { Button, Checkbox } from 'react-vant'
import { Arrow, ShopO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';

export default function Success() {
    const navigate = useNavigate()
    return (
        <div>
            <div className={styles.tops}>
                <div className={styles.tops_suc}>
                    <Checkbox defaultChecked checkedColor='#63b54b' />
                    <span>支付成功</span>
                </div>
                <div className={styles.tops_but}>
                    <Button color='black' plain size='small' style={{ backgroundColor: '#f5f5f5', borderRadius: '0.3rem' }} onClick={()=>{navigate('/outlet/orderpage')}}>查看订单</Button>
                    <Button color='black' plain size='small' style={{ backgroundColor: '#f5f5f5', borderRadius: '0.3rem' }} onClick={()=>{navigate('/outlet/home')}}>返回首页</Button>
                </div>
                <div className={styles.tops_tui}>
                    为&nbsp;<span style={{ color: '#cdcdcd' }}>/&nbsp;</span>您&nbsp;<span style={{ color: '#cdcdcd' }}>/</span>&nbsp;推&nbsp;<span style={{ color: '#cdcdcd' }}>/&nbsp;</span>荐
                </div>
            </div>
            <div className={styles.recGoods}>

                <div className={styles.recItem}>
                    <img src="../../public/show7.svg" alt="" />
                    <div className={styles.underImg}>
                        <b>麦香鸡脚汉堡</b>
                        <p>
                            <b>￥18</b>
                            <span>月售509</span>
                        </p>
                        <span>附近热销商品</span>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <ShopO style={{ fontSize: '.15rem' }} />
                            <p style={{ display: 'inline-block', fontSize: '.16rem' }}>华莱士凤凰广场2店</p>
                            <Arrow style={{ fontSize: '.12rem' }} />
                        </div>
                        <span>20分钟|配送费4元</span>
                    </div>
                </div>

                <div className={styles.recItem}>
                    <img src="../../public/show7.svg" alt="" />
                    <div className={styles.underImg}>
                        <b>麦香鸡脚汉堡</b>
                        <p>
                            <b>￥18</b>
                            <span>月售509</span>
                        </p>
                        <span>附近热销商品</span>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <ShopO style={{ fontSize: '.15rem' }} />
                            <p style={{ display: 'inline-block', fontSize: '.16rem' }}>华莱士凤凰广场2店</p>
                            <Arrow style={{ fontSize: '.12rem' }} />
                        </div>
                        <span>20分钟|配送费4元</span>
                    </div>
                </div>

                <div className={styles.recItem}>
                    <img src="../../public/show7.svg" alt="" />
                    <div className={styles.underImg}>
                        <b>麦香鸡脚汉堡</b>
                        <p>
                            <b>￥18</b>
                            <span>月售509</span>
                        </p>
                        <span>附近热销商品</span>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <ShopO style={{ fontSize: '.15rem' }} />
                            <p style={{ display: 'inline-block', fontSize: '.16rem' }}>华莱士凤凰广场2店</p>
                            <Arrow style={{ fontSize: '.12rem' }} />
                        </div>
                        <span>20分钟|配送费4元</span>
                    </div>
                </div>

            </div>

        </div>
    )
}